<template>
  <div class="Showcar-Con">
    <div class="list">
      <div class="mui-card" v-for="item in goodslist" :key="item.id">
        <div class="mui-card-content">
          <div class="mui-card-content-inner goods-item">
            <mt-switch v-model="seletedObj[item.id]" @change="changeSelect(item.id,seletedObj[item.id])"></mt-switch>
            <img :src="item.thumb_path" alt="">
            <div class="info">
              <h4>{{item.title}}</h4>
              <div class="goods-info">
                <span class="price">￥{{item.sell_price}}</span>

                <nobox :incount="countObj[item.id]" :id="item.id"></nobox>

                <a href @click.prevent="del(item.id)">删除</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner jiesuan">
          <div class="left">
            <p>总计（不含运费）</p>
            <p>
              已勾选商品
              <span class="danger">{{selectescount}}</span>件，总价
              <span class="danger">￥{{amount}}</span>
            </p>
          </div>
          <mt-button type="danger">结算</mt-button>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters,mapMutations} from 'vuex'
import nobox from '../sub-compoents/nobox.vue'
export default {
  data() {
    return {
        goodslist:[],
        num:0
    };
  },
  components:{
     nobox
  },
  methods: {
    ...mapMutations(["delFromCart","changeSelectS"]),
    async getGoodsCartList(){
      if(this.idstr<=0)return
       const {data}=await this.$http.get("/api/goods/getshopcarlist/"+this.idstr)
       if(data.status===0){
           //console.log(data);
           return this.goodslist=data.message;
       }
    },
    del(id){
       //console.log(id)
       this.goodslist.some((item,i)=>{
         if(item.id==id){
           this.goodslist.splice(i,1);
           return true
         }
       })
       this.delFromCart(id)
    },
    changeSelect(idd,sesss){
      //console.log(idd+"----"+sesss)
      this.changeSelectS({id:idd,selected:sesss})
    }
  },
  computed:{
      ...mapGetters(['idstr','countObj','seletedObj','selectescount','amount'])
  },
  created(){
      this.getGoodsCartList();
  },
  mounted() {
    
    //console.log(this.countObj)
  }
};
</script>

<style lang="scss" scoped>
.Showcar-Con {
  background-color: #eee;
  overflow: hidden;
  .goods-item {
    display: flex;
    img {
      width: 60px;
      height: 60px;
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .goods-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .price {
          color: red;
          font-weight: bold;
          font-size: 14px;
        }
      }
      h4 {
        font-size: 14px;
      }
    }
  }
  .jiesuan {
    .danger {
      color: red;
    }
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>